# 第十四章 前端目录结构及准备工作
在经过前面十几个章节的努力，我们完成了CMS的后端接口部分的开发，从本章节开始就将进入大家期待已久（只是嘴上说说，但并没有打赏）的前端部分开发的内容，在正式开始之前我有些话想各位读者分享分享，一方面是觉得这些内容或许对你后续的学习能起到一些帮助，另一方面是能给我后面内容更新争取一点时间以便光明正大的拖更，缓得了一章算一章嘛。
在第一章中的《前后端分离》小节的内容中，我向大家简单介绍了前后端分离的概念和发展简史。从中我们可以知道，在前后端分离这种架构还没兴起之前一个开发人员除了写后端代码还需要写前端代码，但是在前后端分离架构兴起之后才接触编程的同学就有点不一样了，前端的同学对后端的东西知之甚少甚至一窍不通。而后端的同学则对前端的东西知之甚少甚至一窍不通，在很多公司甚至还出现了前端同学和后端同学无法流畅沟通的情况。这里引用七月老师的一句话：
前后端分离，从某个角度上来说是降低了开发人员的技术水平。
我本人也同样面临了这个问题。在我接触PHP的时候已经是前后端分离大行其道的时代，我只做后端API的开发，至于前端三宝HTML、CSS、JavaScript则是在做全栈项目的时候才开始接触。和大部分后端同学第一次接触前端开发的时候一样，遇到了一个很普遍的又很有意思的现象，HTML和JavaScript能很快掌握，但是却卡在了CSS上，各种布局完全找不到头脑，这里面原因很多，但其中一个个人觉得很关键的原因就是编程思维固化的原因。后端开发中的编程思维和习惯可以让我们很快适应JavaScript甚至复用在开发过程中，但在CSS上却是行不通。那怎么克服这个问题呢？这里我和大家分享一个经验，这也是我折腾了许久之后总结出来的：
没有捷径，没有秘籍，多写，多重构。
是不是很惊喜？现实就是这么残酷。我也尝试过找一些文档、资料、教程去学习，但是后来发现，这些都只能作为“手册”来用，就是当你忘记了语法就翻出来查，具体到项目中你想怎么写，没人帮得到你，只能通过不断的尝试。一开始你会书写很多样式代码就为了实现一个样式，但随着你样式的书写经验增加，你会接触到越来越多的技巧，然后开始重构，最终结果就是你一个样式所需要的样式代码越来越少了。在我看来这个过程都是没有感觉到任何学习压力的，也不需要额外去付出什么，一切都是水到渠成。当然，学习方法不存在唯一性和普遍性，如果你有更好的方法也可以尝试分享出来。
聊完CSS，我们来说说JavaScript，这个其实对于后端开发者来说还是蛮友好的，特别是ES6标准之后可以实现面向对象的机制（前端同学很多可能对面向对象这个东西不甚理解，事实上很多后端同学自己也不理解，所以我打算在本专栏中单独开辟一个章节来专门阐述），剩下的就是熟悉js语法而已，这个也就是写多了就会的东西，至于那些js本身的高级特性，如果你不是做造轮子的人，接触的机会并不多，有兴趣或者用到的时候查阅资料了解下即可。那么基于js的前端开发框架又如何学习呢？在本专栏中我们使用的lin-cms-vue就是基于Vue这个前端框架，理论上来说，会js就会任意基于js的框架，我们说学Vue其实就是在学习和熟悉Vue提供我们的一些机制的过程，本质上还是在用前端三宝。所以我们学框架其实更重要的是学习框架本身的设计思想，就使用框架这件事而言，你有点js的基础+官方文档就可以实现了。当然有些读者觉得这话说得太轻巧了，实际上手还是一脸懵逼，是的，当初我也是这样的（哈哈哈哈哈哈哈哈哈）。解决这问题的办法同样很简单，这次是真的有办法：
看实战的教程，看人家一整套下来是怎么做的，模仿怎么用，搞懂到底怎么回事。然后再运用到自己的项目中。
这个方法同样适用于前端同学第一次接触学习后端框架，本人就是通过这种方法学习后端框架和前端框架，在有这个经历和过程之后，你就可以真正做到懂实现语言+官方文档即可掌握任意一个开发框架。这里看起来似乎很高大上，但其实等你经历了你就知道其实真的不算什么，这里我更想表达的是，我见过很多程序员很执着于学习各种不同框架，觉得自己每点亮了一个框架的技能树，自己就变强了。但从前面我阐述的内容来看，相信读者应该会觉得这件事就显得很没意义而且浪费时间，是的，起码我是这么认为的，并没有变强。同样的，本专栏的初衷也是希望能够帮助读者较为舒适的迈入编程世界的大门，至于你能变多强，还需要读者在其他时间里的学习和积累。
以上就是我在正式开始前端部分内容前要和读者们分享的内容，希望能对你有所帮助，接下来就让我们开始迎接lin-cms-vue的项目之旅吧！
# 准备工作
当你看到本章节的时候，距离我们第一次安装并运行Lin CMS已经过去许久，期间Lin CMS的前端和后端都有一些升级和改动，目前lin-cms-vue的最新版本号0.2.1，为了避免读者后续阅读和使用项目上出现一个莫名奇妙的错误，这里我们在正式开始前端章节内容之前对前端和后端框架做一次版本升级，如果你当前Lin-cms-vue版本已经是0.2.1并且整体运行没有出现问题，那么可以忽略以下的内容。版本升级主要涉及前端和后端两部分：
# 后端框架升级
- 在lin-cms-tp5项目根目录下执行
git pull，此命令会同步当前代码仓库最新的代码并合并到本地，执行这条命令后部分代码会出现冲突情况，注意保留我们自己编写的部分，其余框架自身的变动代码选择采用新的代码； - 执行
composer update命令更新扩展库； - 执行
php think migrate:run，因为最新版本的Lin CMS对lin_user表做了调整，需运行下最新的迁移脚本适配变更； - 通过数据库图形管理工具或者phpMyAdmin连接我们的zerg数据库，手动给lin_user表中已存在的用户记录中
username字段添加一个值，这个值会作为登陆时的账号。
# 前端框架升级
在lin-cms-vue项目根目录下执行git pull即可。
# 目录结构
按照惯例，我们首先来熟悉以下lin-cms-vue的目录结构。运行我们前面已经安装好了的WebStrom，通过这个IDE打开我们的lin-cms-vue目录，可以看到目录结构如下：
├───public // 公共资源目录，该目录webpack原封打包
│ ├───icons // icon图片存放目录
│ │ favicon.ico // 本站favicon图片
│ │ iconfont.css // 阿里iconfont文件
│ │ index.html // template模板
│ │ robots.txt // Robots协议
├───script // 脚本
├───src
│ ├───assets // 静态资源文件存放目录
│ ├───components // 布局组件及业务基础组件
│ │ ├───layout // layout布局组件
│ │ ├───base // 通用基础组件库（包含element-ui二次封装组件）
│ ├───config // config配置项
│ │ ├───stage // 路由配置文件
│ │ │ error-code.js // 与服务端约定的错误状态码
│ │ │ index.js // 前端自定义配置项
│ ├───lin // Lin CMS核心库
│ │ ├───directives // 全局指令
│ │ ├───filter // 全局过滤器
│ │ ├───mixin // 全局mixin
│ │ ├───models // model层
│ │ ├───utils // 各种工具函数
│ ├───plugins // 插件
│ ├───router // 前端路由
│ │ ├───modules // 每个业务模型的路由树
│ │ │ home-router.js // 菜单路由
│ │ │ index.js // vue-router入口文件
│ │ │ routes.js // vue-router路由配置
│ ├───store // vuex状态管理文件
│ ├───views // 业务组件
│ │ App.vue // vue根组件
│ │ main.js // webpack打包入口
│ babel.config.js // babel配置文件
│ .browserslistrc // 适配浏览器版本
│ .eslintrc.js // eslint配置文件
│ .gitignore // git上传忽略文件
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
lin-cms-vue的开发文档中对目录结构做了很清楚的注释，如同前面我们在第一次看到Lin-cms-tp5的目录结构时一样，目录看起来很多，但是其实很多我们并不需要关心。我们接触得最多的就是src\view目录，这个目录就是用于存放我们自己写的各种页面组件，我们的页面就是由一个或者N个页面组件组成。
林间有风：Lin 的前端部分，是在 vue-cli3 生成的模板项目的基础上开发而来的 。 当然对于本项目而言，你几乎可以不用关注 vue-cli3 的内容，如果你需要对 webpack 的配置进行更改，那么如果你对 vue-cli 的使用不熟悉，建议先阅读官方文档。 Lin 的开发遵循严格的目录结构和代码规范、我们希望你能对此达成共识，这非常有助于你后续的开发。
这一段是林间有风团队对lin-cms-vue项目目录结构的注释，我们理所当然的要和团队达成共识，遵循严格的目录结构和代码规范遵循，此外强烈建议读者阅读和收藏lin-cms-vue官方开发文档，点击访问：LinCMS前端，不求你看懂，但最起码先大概了解下文档里都有什么，以备不时之需。
开发过程中请保持lin-cms-tp5和lin-cms-vue内置web服务器的开启和MySQL数据库能正常访问